<template>
	<view class="min-h-[100vh] bg-[#E5E5E5]">
		<view class="p-[30rpx]">
			<view class="rounded-[24rpx] overflow-hidden">
				<view class="h-[460rpx] bg-white flex flex-col items-center justify-evenly">
					<view class="text-[32rpx]">排队号</view>
					<view class="text-[48rpx] font-bold">{{ takeInfo.takeId }}</view>
					<view class="w-full flex items-center justify-evenly text-[24rpx] text-[#000]">
						<view
							class="flex flex-col items-center opacity-60"
							:class="{
								'!opacity-100': takeInfo.orderStr === 201
							}"
						>
							<up-image :src="orderStart" width="64rpx" height="64rpx"></up-image>
							<text>已下单</text>
						</view>
						<view
							class="flex flex-col items-center opacity-60"
							:class="{
								'!opacity-100': takeInfo.orderStr === 203
							}"
						>
							<up-image :src="orderLoding" width="64rpx" height="64rpx"></up-image>
							<text>制作中</text>
						</view>
						<view
							class="flex flex-col items-center opacity-60"
							:class="{
								'!opacity-100': takeInfo.orderStr === 301
							}"
						>
							<up-image :src="orderComplete" width="64rpx" height="64rpx"></up-image>
							<text>可取餐</text>
						</view>
					</view>
					<view class="text-[26rpx] py-[10rpx] px-[20rpx] bg-[#F5F5F5] rounded-full" v-if="takeInfo.beforeCode">
						前面还有
						<text class="text-[#46A7FD]">{{ takeInfo.beforeCode || 0 }}</text>
						个订单
					</view>
					<view class="text-[24rpx]">{{ statusMap[takeInfo.orderStr] }}</view>
				</view>
				<view class="bg-background px-[32rpx]">
					<view class="py-[72rpx] flex items-center justify-center">
						<up-qrcode :size="150" :val="takeInfo.orderId?.toString()" :cid="$u.guid()"></up-qrcode>
					</view>
					<view class="py-[32rpx] border-b border-[#E9E9E9] flex items-center">
						<view class="flex-1">
							<view class="text-[28rpx]">{{ takeInfo.shopName }}</view>
							<view class="text-[#666666] text-[24rpx] mt-[8rpx] leading-[40rpx]">{{ takeInfo.shopAddress }}</view>
						</view>
						<view class="flex-1 flex items-center justify-end">
							<view class="icon mr-[52rpx]" @click="makePhone(takeInfo.shopPhone)"><up-icon name="phone-fill" color="#000" size="36rpx"></up-icon></view>
							<view class="icon"><up-icon name="map-fill" color="#000" size="36rpx" @click="openLocation(takeInfo.shopLocation)"></up-icon></view>
						</view>
					</view>
					<view
						class="py-[32rpx] border-b border-[#E9E9E9] border-dashed flex items-center justify-between"
						v-for="item in takeInfo.takeOrderInfoList"
						:key="item.goodId"
					>
						<view class="flex-1">
							<view class="text-[28rpx]">{{ item.name }}</view>
							<view class="text-[#666666] text-[24rpx] mt-[8rpx] leading-[40rpx]">{{ sku(item.productInfo) }}</view>
						</view>
						<view class="flex text-[28rpx]">
							<view class="mr-[64rpx]">×{{ item.num }}</view>
							<view class="">￥{{ item.price }}</view>
						</view>
					</view>
					<view class="py-[32rpx] border-b border-[#E9E9E9] border-dashed flex items-center justify-between text-[32rpx]">
						<view class="">合计</view>
						<view class="">￥{{ takeInfo.totalPrice }}</view>
					</view>
					<view class="py-[32rpx] flex items-end justify-between text-[24rpx] text-[#999]">
						<view class="">
							<view class="">下单时间: {{ timeFormat(+new Date(takeInfo.orderTime), 'yyyy/mm/dd hh:MM') }}</view>
							<view class="mt-[8rpx]">订单编号: {{ takeInfo.orderSn }}</view>
						</view>
						<view class="" @click.stop="copyText(takeInfo.orderSn)">复制</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { readonly, ref } from 'vue';
import { getVerifyInfo } from '@/config/api/order';
import { onLoad } from '@dcloudio/uni-app';
import { timeFormat } from '@/uni_modules/uview-plus';
import { copyText } from '@/utils/utils';
import orderStart from '@/static/orderStart.png';
import orderLoding from '@/static/orderLoding.png';
import orderComplete from '@/static/orderComplete.png';
onLoad((options) => {
	if (options.orderId) {
		getInfo(options.orderId);
	}
});
const { getInfo, takeInfo } = useTake();
const statusMap = readonly({
	201: '您的订单已下单,马上为您制作',
	203: '您的订单制作中,请耐心等待',
	301: '您的订单已完成,请前往取餐'
});
function useTake() {
	const takeInfo = ref({});
	const getInfo = async (orderId = 32) => {
		try {
			const res = await getVerifyInfo(orderId);
			if (res.code == 200) {
				takeInfo.value = res.data;
			}
		} catch (error) {
			//TODO handle the exception
		}
	};
	return {
		getInfo,
		takeInfo
	};
}
const sku = (json) => {
	return Object.values(JSON.parse(json)).join(',');
};
const makePhone = (phoneNumber) => {
	uni.makePhoneCall({
		phoneNumber
	});
};
const openLocation = (location) => {
	uni.openLocation({
		latitude: location.lat,
		longitude: location.lng,
		name: takeInfo.value.shopName,
		address: takeInfo.value.shopAddress
	});
};
</script>

<style lang="scss" scoped>
.icon {
	@apply w-[68rpx] h-[68rpx] rounded-full border flex items-center justify-center;
}
</style>
